import * as React from 'react';
import { connect } from 'react-redux';
import ReactCustomScrollBars from 'react-custom-scrollbars';

import { message, Row, Col } from 'antd';

import { removeTest, fetchTestList } from 'actions/test';
import { sortLessonTests } from 'actions/lesson';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadablePopToSort = LoadableComponent(() => import('components/common/PopToSort'));
const LoadableTestList = LoadableComponent(() => import('components/common/ItemList'));
const LoadableTestEdit = LoadableComponent(() => import('./Edit'));

interface IndexProps {
  dispatch: (action: any) => any;
  lessonId: number;
  levelId: number;
}
interface IndexState {
  isSortTest: boolean;
  editTestId: number;
  tests: any[];
}

class Index extends React.Component<IndexProps, IndexState> {
  static defaultProps: IndexProps = {
    dispatch: () => {},
    lessonId: 0,
    levelId: 0,
  };
  constructor(props: IndexProps) {
    super(props);
    this.state = {
      isSortTest: false,
      editTestId: null,
      tests: [],
    };
  }

  componentWillMount() {
    if (this.props.levelId) {
      this.handleFetchTests();
    }
  }

  componentWillReceiveProps(nextProps: any) {
    const { levelId } = nextProps;
    const { levelId: oldLevelId } = this.props;

    if (levelId !== oldLevelId) {
      this.setState({
        editTestId: null,
      });
      this.handleFetchTests(levelId);
    }
  }

  handleFetchTests = (levelId: number = this.props.levelId, callback = () => {}) => {
    const { dispatch, lessonId } = this.props;

    dispatch(fetchTestList(lessonId, levelId)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        this.setState({
          tests: result.response.data.items,
        });
        callback();
      }
    });
  };

  handleSortCancel = () => {
    this.setState({
      isSortTest: false,
    });
  };

  handleSortTest = () => {
    this.setState({
      isSortTest: true,
    });
  };

  handleSortOk = (sortedIds: number[]) => {
    const { dispatch, lessonId, levelId } = this.props;

    dispatch(sortLessonTests(lessonId, sortedIds)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        this.handleFetchTests(levelId);
        this.setState({
          isSortTest: false,
        });
        message.success('保存成功');
      }
    });
  };

  handleEdit = (editTestId: any = 0) => {
    this.setState({
      editTestId,
    });
  };

  newTestCallback = (editTestId: any) => {
    this.handleFetchTests(this.props.levelId, () => {
      this.setState({
        editTestId,
      });
    });
  };

  handleRemoveTest = (testId: number) => {
    const { dispatch, lessonId, levelId } = this.props;
    dispatch(removeTest(lessonId, testId)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        this.handleFetchTests(levelId);
        this.setState({
          editTestId: null,
        });
        message.success('删除成功');
      }
    });
  };

  render() {
    const { levelId, lessonId } = this.props;
    const { editTestId, isSortTest, tests } = this.state;

    return (
      <div>
        {isSortTest && (
          <LoadablePopToSort
            sortName="闯关测试排序"
            items={tests}
            onCancel={this.handleSortCancel}
            onOk={this.handleSortOk}
          />
        )}
        <Row gutter={16}>
          <Col span={5}>
            <div className="steps-wrap" style={{ borderRight: '1px solid #dedede' }}>
              <ReactCustomScrollBars>
                <LoadableTestList
                  title="测试"
                  items={tests}
                  parentId={lessonId}
                  activeId={editTestId}
                  onSort={this.handleSortTest}
                  onEdit={this.handleEdit}
                  onRemove={this.handleRemoveTest}
                />
              </ReactCustomScrollBars>
            </div>
          </Col>
          <Col span={19}>
            {editTestId !== null && (
              <div className="activity-edit-wrap test-parser-modal">
                <LoadableTestEdit
                  levelId={levelId}
                  lessonId={lessonId}
                  testId={editTestId}
                  newTestCallback={this.newTestCallback}
                />
              </div>
            )}
          </Col>
        </Row>
      </div>
    );
  }
}

interface OwnProps {
  lessonId: number;
  levelId: number;
}

function mapStateToProps(state: any, ownProps: OwnProps) {
  const { lessonId, levelId } = ownProps;

  return {
    lessonId,
    levelId,
  };
}

export default connect(mapStateToProps)(Index);
